<template>
	<view>
		<!-- 1，头部信息组件 -->
		<view class="top-box">
			<!-- 1.1，年份展示 -->
			<view class="box-time">
				<text>2024年</text>
			</view>
			<!-- 1.2，用户信息展示 -->
			<view class="box-userinfo">
				<view class="user-head">
					<image :src="head"></image>
				</view>
				<view class="user-name">
					<text v-if="queryType == '1'">{{nickname}}共收到</text>
					<text v-else>{{nickname}}共发送</text>
				</view>
				<view class="user-price">
					<text class="price">{{getPrice(sumPrice)}}</text>
					<text class="unit">元</text>
				</view>
			</view>
			<!-- 1.3，总共收到红包数 -->
			<view class="box-tips">
				<view class="left-tips">
					<view class="tips-num">
						<text>{{total}}</text>
					</view>
					<view class="tips-title">
						<text v-if="queryType == '1'">收到红包</text>
						<text v-else>发送红包</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 2， -->
		<view class="con">
			<view @click="gotoRedDetail(item)" class="con-con" v-for="(item,index) in recordList" :key="index">
				<view class="con-box">
					<view class="con-box-left">
						<view class="title" style="display: flex;">
							<view>
								<text>{{item.type}}</text>
							</view>

							<view v-if="item.redPkgType != null && item.redPkgType == '2'">
								<image style="width: 40rpx;height: 40rpx;margin: 5rpx 0 0 10rpx;"
									:src="require('@/static/img/msg/redpkg/03.svg')"></image>
							</view>
						</view>
						<view class="time">
							<text>{{getTime(item.createTime)}}</text>
						</view>
					</view>
					<view class="con-box-right-send" v-if="item.method == '5'">
						<view class="price">{{ getPrice(parseFloat(item.price) / 100)}}</view>
						<view class="price-tips"
							v-if="item.surplusNum != null && item.totalNum != null && item.surplusNum > 0">
							领取{{item.totalNum - item.surplusNum}}/{{item.totalNum}}</view>
						<view class="price-tips-lw" v-else>已领完</view>
					</view>
					<view class="con-box-right-rob" v-else>
						<view class="price">{{ getPrice(parseFloat(item.price) / 100)}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 3，动画效果 -->
		<red-pkg-animation @changeSelect="changeSelect" :share="isShowAnimation"
			@display="closeAnimation"></red-pkg-animation>
	</view>
</template>

<script>
	import {
		queryRedPkgByRecord
	} from '@/api/http/msg/redpkg.js'

	import redPkgAnimation from './child/red-pkg-animcation.vue'

	import {
		handleNowTime
	} from '@/utils/time/time.js'

	import {
		handlePrice
	} from '@/utils/price.js'

	export default {
		components: {
			redPkgAnimation
		},
		data() {
			return {
				page: 1,
				size: 20,
				year: '2024',
				queryType: '1',

				sumPrice: '',
				recordList: [],
				userId: uni.getStorageSync('userId'),
				head: uni.getStorageSync('head'),
				nickname: uni.getStorageSync('nickname'),
				total: 0,
				isShowAnimation: false,
				redPkgMsgInfo: {}
			}
		},
		methods: {
			//1，时间处理
			getTime(time) {
				return handleNowTime(time)
			},
			getPrice(price) {
				var p = handlePrice(price)
				//console.log(p)
				return p
			},
			//2，数据查询
			queryRedPkgByRecord() {
				var res = {
					page: this.page,
					size: this.size,
					year: this.year,
					queryType: this.queryType
				}
				queryRedPkgByRecord(res).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					if (res.data.busInfo.resultPage.records.length == 0) {
						return
					}

					//console.log(res.data.busInfo)
					this.sumPrice = res.data.busInfo.sumPrice
					this.recordList = this.recordList.concat(res.data.busInfo.resultPage.records);
					//this.recordList =  res.data.busInfo.resultPage.records
					this.total = res.data.busInfo.resultPage.total
				})
			},
			queryRedPkgByRecordByChangeType() {
				var res = {
					page: this.page,
					size: this.size,
					year: this.year,
					queryType: this.queryType
				}
				queryRedPkgByRecord(res).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					if (res.data.busInfo.resultPage.records.length == 0) {
						return
					}

					//console.log(res.data.busInfo)
					this.sumPrice = res.data.busInfo.sumPrice
					this.recordList = res.data.busInfo.resultPage.records
					//this.recordList =  res.data.busInfo.resultPage.records
					this.total = res.data.busInfo.resultPage.total
				})
			},
			//3，关闭弹框
			closeAnimation() {
				this.isShowAnimation = false
			},
			//4，切换查询方式
			changeSelect(e) {
				this.isShowAnimation = false
				this.queryType = e
				this.page = 1
				this.queryRedPkgByRecordByChangeType()
			},
			//5，跳转红包详情页
			gotoRedDetail(item) {
				//console.log(item)
				if (item.redPkgType == '4') {
					//跳转到用户红包页
					return uni.navigateTo({
						url: '/subpkg/msg/red-pkg/red-pkg-detail/red-pkg-detail?hbId=' + item
							.redPkgId
					})
				}
				//跳转群聊红包页
				this.redPkgMsgInfo.redPkgId = item.redPkgId
				return uni.navigateTo({
					url: '/subpkg/msg/red-pkg/red-pkg-group/red-pkg-group?redPkgMsgInfo=' + JSON
						.stringify(this.redPkgMsgInfo)
				})

			}
		},
		onLoad(e) {
			// wx.setNavigationBarTitle({
			// 	title: '收到的红包'
			// })
			this.queryRedPkgByRecord()
			this.redPkgMsgInfo = JSON.parse(e.redPkgMsgInfo)

		},
		onNavigationBarButtonTap() {
			this.isShowAnimation = true
		},
		onReachBottom() {
			this.page++;
			this.queryRedPkgByRecord()
		}
	}
</script>

<style lang="scss">
	.top-box {
		width: 96%;
		padding: 30rpx 2%;
		background-color: #eee;

		.box-time {
			text-align: right;
			line-height: 80rpx;

			text {
				font-size: 28rpx;
				color: #D5AC72;
			}
		}

		.box-userinfo {
			.user-head {
				text-align: center;

				image {
					width: 120rpx;
					height: 120rpx;
					margin: 10rpx 0;
				}
			}

			.user-name {
				text-align: center;
				font-size: 32rpx;
				margin: 10rpx 0;

				text {}
			}

			.user-price {
				text-align: center;
				margin: 10rpx 0;

				.price {
					font-size: 65rpx;
					margin-right: 10rpx;
				}

				.unit {
					font-size: 35rpx;
				}
			}
		}

		.box-tips {
			text {
				color: #9A9A9A;
			}

			.tips-num {
				font-size: 40rpx;
				width: 30%;
				text-align: center;
			}

			.tips-title {
				font-size: 32rpx;
				width: 30%;
				text-align: center;
			}
		}


	}

	.con-con {
		width: 100%;
		height: 100rpx;
		padding-top: 10rpx;
		margin: 10rpx 0;

		&:active {
			background-color: #eee;
		}

		.con-box {
			width: 94%;
			margin-left: 3%;
			display: flex;
			justify-content: space-between;

			.con-box-left {
				.title {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
				}

				.time {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;

					text {
						color: #bfbfbf;
					}

				}
			}

			.con-box-right-send {
				.price {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 30rpx;
				}

				.price-tips {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #D43030;
				}

				.price-tips-lw {
					height: 40rpx;
					line-height: 20rpx;
					font-size: 26rpx;
					color: #9A9A9A;
				}
			}

			.con-box-right-rob {
				.price {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
				}

			}
		}
	}
</style>